<template>
  <el-card class="monitor-card" :class="{ 'animate-pulse': loading }">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold">内存状态</span>
        <el-tag :type="getStatusType(safePercent(data.usage))" size="small">
          {{ safePercent(data.usage).toFixed(1) }}%
        </el-tag>
      </div>
    </template>
    
    <el-skeleton :loading="loading" animated :rows="4">
      <template #default>
        <div class="grid grid-cols-1 gap-4">
          <!-- 物理内存 -->
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-sm">物理内存</span>
              <span class="text-sm">
                {{ formatBytes(data.used) }}/{{ formatBytes(data.total) }}
              </span>
            </div>
            <el-progress 
              :percentage="safePercent(data.usage)" 
              :color="getProgressColor(safePercent(data.usage))"
              :stroke-width="16"
            />
          </div>
          
          <!-- 交换空间 -->
          <div v-if="data.swapTotal > 0">
            <div class="flex justify-between mb-1">
              <span class="text-sm">交换空间</span>
              <span class="text-sm">
                {{ formatBytes(data.swapUsed) }}/{{ formatBytes(data.swapTotal) }}
              </span>
            </div>
            <el-progress 
              :percentage="safePercent(data.swapUsage)" 
              color="#909399"
              :stroke-width="12"
            />
          </div>
          
          <!-- 详细信息 -->
          <div class="grid grid-cols-2 gap-2 mt-2">
            <div class="info-item">
              <span>空闲</span>
              <span>{{ formatBytes(data.free) }}</span>
            </div>
            <div class="info-item">
              <span>页大小</span>
              <span>{{ formatBytes(data.pageSize) }}</span>
            </div>
            <div class="info-item">
              <span>物理总量</span>
              <span>{{ formatBytes(data.physicalTotal) }}</span>
            </div>
            <div class="info-item">
              <span>物理使用</span>
              <span>{{ formatBytes(data.physicalUsed) }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </el-card>
</template>

<script setup lang="ts">
import type { GetMemInfoRes } from '@/api/monitor/types';

defineProps<{
  data: GetMemInfoRes;
  loading: boolean;
}>();

// 字节格式化
const formatBytes = (bytes: number | undefined | null): string => {
  const value = Number(bytes);
  if (!Number.isFinite(value) || value <= 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.max(0, Math.min(sizes.length - 1, Math.floor(Math.log(value) / Math.log(k))));
  return parseFloat((value / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 百分比安全值（防止 NaN/undefined，并限制 0-100）
const safePercent = (val: number | undefined | null): number => {
  const n = Number(val);
  if (!Number.isFinite(n)) return 0;
  return Math.max(0, Math.min(100, n));
};

// 状态类型计算
const getStatusType = (usage: number) => {
  if (usage > 90) return 'danger';
  if (usage > 75) return 'warning';
  return 'success';
};

// 进度条颜色
const getProgressColor = (usage: number) => {
  return usage > 90 ? '#f56c6c' : usage > 75 ? '#e6a23c' : '#67c23a';
};
</script>

<style lang="scss" scoped>
.monitor-card {
  .info-item {
    @apply flex justify-between py-1 text-sm;
    span:first-child {
      @apply text-gray-500 dark:text-gray-400;
    }
  }
}
</style>